<template>
    <div class="overall">
        <el-card class="user_address">
            <div class="address_title">
                <h2>使用者信息</h2>
            </div>
            <div class="recipient_field">
                <div v-for="(item,index) in recipients" :class="choosenum==index? 'recipient-item-chosen':'recipient-item'" @click="onclick(index)">
                    <p>使用者:{{item.name}}</p>
                    <p>联系方式:{{item.telephone}}</p>
                </div>
            </div>
        </el-card>

        <el-card class="good_inventory">
            <div class="inventory_title">
                <h2>购物清单</h2>
            </div>
            <el-table :data="detail" style="width: 100%">
                <el-table-column prop="name" label="商品名称" width="200">
                </el-table-column>
                <el-table-column prop="moneyPerHour" label="价格（元/时）" width="200">
                </el-table-column>
                <el-table-column prop="" label="起始时间" width="250">
                    <template slot-scope="scope">
                         <el-time-select placeholder="起始时间" v-model="startTime":picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" @change="handleChange">
                        </el-time-select>
                    </template>
                </el-table-column>
                 <el-table-column prop="" label="终止时间" width="250">
                    <template slot-scope="scope">
                         <el-time-select placeholder="终止时间" v-model="endTime":picker-options="{ start: '08:30', step: '00:15', end: '18:30',minTime:startTime}"  @change="handleChange">
                        </el-time-select>
                    </template>
                </el-table-column>
            </el-table>
            <button class="main-btn" @click="creatOrder">付款</button>
            <div class="pay_field">
                <h2> 需支付:</h2>
                <h3 class="good-price">￥{{total}}</h3>
            </div>

        </el-card>

        <el-dialog title="付款码" width="50%" :visible.sync="qrCodetDialogVisible">
            <img src='../../../assets/img/qrcode.png' class="qrcode">
        </el-dialog>

    </div>
</template>

<script>
import cityData from './citydata.js';
export default {

    data(){
        return{
            cityData,
            detail:[],
            recipients:[],
            goodId:'',
            total:'',
            startTime:'08:30',
            endTime:'08:30',
            choosenum:0,
            qrCodetDialogVisible:false,
            addForm:{
                shareGoodsId:'',
                recipientId:'',
                startDate:'',
                endDate:''
            },
        }
    },
    methods:{
         async getDetail(id){
            const {data:res}=await this.$http.get('rent/shareGoods/findByID/'+id)
            this.detail.push(res.data); 
            this.total=0;
            this.addForm.shareGoodsId=id;
            console.log(this.detail)  
        },
         async getRecipient()
        {
            const {data:res}=await this.$http.get('rent/recipient/findByUseId/1');
            this.recipients=res.data;
            console.log(res)
        },
        handleChange(){
            this.calculateTime();
        },
         creatOrder()
        {
            var that=this;
            this.$confirm('是否确认下单?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(async () => {
                const {data:res}=await that.$http.post('rent/shareOrder/add',that.addForm)
                if(res.code==200)
                {
                this.$message.success("下单成功!")
                this.qrCodetDialogVisible=true; 
                }
                }).catch(() => {            
                });
        },
        onclick(index)
        {
            this.addForm.recipientId=this.recipients[index].strId;
            this.choosenum=index;
        },
        calculateTime()
        {
            var d=new Date();
            var sday=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+this.startTime+':00';
            var eday=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+this.endTime+':00';
            var s=new Date(sday);
            var e=new Date(eday);
            var stime=Date.parse(s);
            var etime=Date.parse(e);
            var spentTime=etime-stime;
            var hour=spentTime/3600000;
            this.addForm.startDate=stime;
            this.addForm.endDate=etime;
            this.total=this.detail[0].moneyPerHour*hour;
            console.log(stime)           
            console.log(etime)
            console.log(spentTime)
            console.log(hour)
        }
    },
    created(){
        this.goodId=this.$route.query.Id;
        this.getDetail(this.goodId);        
        this.getRecipient();

    }
}
</script>

<style lang="less" scoped>
/deep/.el-card__body
{
    padding:0;
}
h2
 {
     font-size: 18px;
     font-weight: 400;
    color: #626262;
     display: inline-block;
}
.main-btn
{
    width: 145px;
    height: 50px;
    float:right;
    line-height: 28px;
    vertical-align: middle;
    background-image: linear-gradient(180deg, #678ee7, #5078df);
    border: 1px solid #5c81e3;
    border-radius: 4px;
    margin-right:10px;
    font-size: 16px;
    color:#fff;
    cursor: pointer;
    margin-top:5px;
    &:hover {
      background-image: linear-gradient(180deg, #6c8cd4, #4769c2);
    }
}
.good-price {
      margin: 15px 0;
      height: 30px;
      text-align: center;
      line-height: 25px;
      color: #d44d44;
      font-family: Arial;
      font-size: 18px;
      font-weight: 700;
}
.good_inventory,.user_address
{
    width:1200px;

    margin-bottom: 113px;
    margin-left:auto;
    margin-right: auto;;
    overflow: hidden;
    background: #fff;
    padding:0;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0,0,0,.14);
    box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
    .inventory_title,.address_title
    {
    padding-left: 30px;
    position: relative;
    z-index: 10;
    height: 60px;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
    background: #f3f3f3;
    background: linear-gradient(#fbfbfb,#ececec);
    line-height: 60px;
    font-size: 18px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    }
}
.pay_field
{
    float:right;
    display: flex;
    margin-right:100px;
}
.deposit_field
{
 float: right;  
 margin-right:100px;
 display: flex;
}

.recipient_field
{
    display: flex;
    padding: 30px 13px 0;
    .recipient-item,.recipient-item-chosen
    {
        overflow: hidden;
        float: left;
        width: 275px;
        height: 160px;
        margin: 0 0 30px 16px;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        line-height: 14px;
        text-align: left;
        word-wrap: break-word;
        word-break: normal;
        color: #626262;
        cursor: pointer;
        padding: 19px 14px 0 19px;
        font-size:14px;
        line-height: 26px;
        &:hover{
            border: 1px solid #4769c2;
        }

    }
    .recipient-item-chosen
    {
        border: 1px solid #4769c2;
    }
    i
    {
        font-size:50px;
        margin-top:40px;
        margin-left:110px;
        display: inline-block;
    }
}
.qrcode
{
    width:400px;
    height:400px;
    margin-left:150px;
}
</style>